<div class="main-container">

  <div nz-row nzGutter="12">
    <div nz-col class="gutter-row" nzSpan="24">
      <div class="gutter-box">
        <nz-card [nzBordered]="false" nzTitle="工程档案详情" [nzExtra]="extraTemplate">
          <ng-template #extraTemplate>
            <button nz-button nzType="primary" (click)="onConfirm()">确定</button>
            <button nz-button nzType="primary" (click)="backToList()">取消</button>
          </ng-template>
          <form nz-form [formGroup]="form">
            <div nz-row [nzGutter]="24">
              <div nz-col [nzSpan]="6">
                <nz-form-item nzFlex>
                  <nz-form-label [nzSm]="6" [nzXs]="24">工程名称</nz-form-label>
                  <nz-form-control>
                    <input nz-input formControlName="name" placeholder="工程名称">
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div nz-col [nzSpan]="6">
                <nz-form-item nzFlex>
                  <nz-form-label [nzSm]="6" [nzXs]="24">年份</nz-form-label>
                  <nz-form-control>
                    <nz-select formControlName="year" nzPlaceHolder="年份">
                      <nz-option *ngFor="let item of yearOption" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div nz-col [nzSpan]="6">
                <nz-form-item nzFlex>
                  <nz-form-label [nzSm]="6" [nzXs]="24">负责人</nz-form-label>
                  <nz-form-control>
                    <input nz-input formControlName="manager" placeholder="负责人">
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div nz-col [nzSpan]="6">
                <nz-form-item nzFlex>
                  <nz-form-label [nzSm]="6" [nzXs]="24">建设地点</nz-form-label>
                  <nz-form-control>
                    <input nz-input formControlName="address" placeholder="建设地点">
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div nz-col [nzSpan]="6">
                <nz-form-item nzFlex>
                  <nz-form-label [nzSm]="6" [nzXs]="24">电话</nz-form-label>
                  <nz-form-control>
                    <input nz-input formControlName="telephone" placeholder="电话">
                  </nz-form-control>
                </nz-form-item>
              </div>

              <div nz-col [nzSpan]="6">
                <nz-form-item nzFlex>
                  <nz-form-label [nzSm]="6" [nzXs]="24">工程类型</nz-form-label>
                  <nz-form-control>
                    <nz-select formControlName="type" nzPlaceHolder="工程类型">
                      <nz-option *ngFor="let item of typeOption" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>

              <div nz-col [nzSpan]="12">
                <nz-form-item nzFlex>
                  <nz-form-label [nzSm]="3" [nzXs]="12">备注</nz-form-label>
                  <nz-form-control>
                    <input nz-input formControlName="remark" placeholder="备注" style="width: 400px;">
                  </nz-form-control>
                </nz-form-item>
              </div>
            </div>
          </form>
        </nz-card>

        <nz-card [nzBordered]="false" style="padding:0 20px;">
          <nz-table
            #table
            nzSize="middle"
            [nzPageSize]="50"
            [nzHideOnSinglePage]="true"
            [nzData]="tableData">
            <thead>
            <tr>
              <th>序号</th>
              <th>文件名称</th>
              <th style="width: 400px;">附件</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of table.data">
              <td>{{ data.num }}</td>
              <td>{{ data.fileTypeName }}</td>
              <td>{{ data.fileName }}</td>
              <td>
                <a (click)="openFileUploadModal(data)">上传</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="versionManage()">版本管理</a>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </nz-card>
      </div>
    </div>
  </div>

  <nz-modal [nzBodyStyle]="nzBodyStyle" nzWidth="660" [(nzVisible)]="fileModalShow" [nzTitle]="fileModalTitle"
            (nzOnCancel)="onFileCancel()" (nzOnOk)="onFileConfirm()">
    <form nz-form [formGroup]="fileUploadForm">
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">版本号</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="version" placeholder="版本号">
            </nz-form-control>
          </nz-form-item>
        </div>
        <!--<div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">文件名</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="name" placeholder="文件名">
            </nz-form-control>
          </nz-form-item>
        </div>-->
        <div nz-col [nzSpan]="24" style="padding-bottom: 20px;">
          <nz-upload
            nzType="drag"
            nzFileType="application/pdf"
            [(nzFileList)]="fileList"
            (nzChange)="handleChange($event)"
            [nzAction]="uploadUrl"
          >
            <p class="ant-upload-drag-icon">
              <i nz-icon nzType="inbox"></i>
            </p>
            <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
          </nz-upload>
        </div>

      </div>
    </form>
  </nz-modal>
</div>


